<template>
  <div id="edit-info">
    <mm-nav-bar
      :title="title"
      rightText='保存'
      :back='backUrl'
      @click-right="hSaveEdit"
    >
    <!-- 点击事件记得在组件中监听 -->
    </mm-nav-bar>
    <div class="main-container">
      <!-- 上传文件 -->
      <!-- 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象;
           v-model 可以绑定已经上传的文件列表，并展示文件列表的预览图;
           max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域 -->
      <van-uploader
        v-if="$route.query.prop === 'avatar'"
        v-model="fileList"
        preview-size='200px'
        :max-count="1"
        :after-read="afterRead"
      />
      <!-- 输入框 -->
      <van-field
        v-else
        v-model="value"
        placeholder="请输入昵称"
      />
    </div>
  </div>
</template>

<script>
// 引入顶部导航栏
import mmNavBar from '@/components/mmNavBar'
// 导入接口
import { editUserInfo, uploadAvatar } from '@/api/myApi.js'
// 导入辅助函数
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'editInfo',
  components: {
    mmNavBar
  },
  data () {
    return {
      title: '', // 标题
      value: '', // 显示的数据
      backUrl: '/myInfo', // 默认返回的地址
      fileList: []
    }
  },
  computed: {
    // Vuex计算属性 - 头像
    ...mapGetters(['avatarUrl'])
  },
  created () {
    // 获取url参数标记（昵称/简介）
    const { prop, redirect } = this.$route.query
    // 相当于 {prop：prop} = {prop：xxx} → prop=xxx

    // 判断是哪个页面
    const titleGroup = {
      nickname: '修改昵称',
      intro: '修改简介',
      position: '修改岗位',
      avatar: '修改头像'
    }
    // 判断返回哪个页面
    if (redirect) {
      this.backUrl = `/${redirect}`
    }
    // 修改标题
    this.title = titleGroup[prop]
    // 获取对应数据
    this.value = this.$store.state.userInfo[prop]
    // 设置默认头像-格式看vant文档
    this.fileList[0] = {
      url: this.avatarUrl
    }
  },
  methods: {
    // Vuex修改数据
    ...mapMutations(['CHANGEONE']),

    // 上传图片后的回调函数
    async afterRead (file) {
      console.log(file)
      // 执行上传文件
      try {
        const res = await uploadAvatar(file.file)
        // console.log(res)
        // 根据接口文档 头像修改需要的是id
        this.value = res.data.data[0].id
      } catch (err) {
        console.log(err)
      }
    },

    // 1.保存修改
    hSaveEdit () {
      // 组装参数 (传来的参数也是属性名)
      const { prop } = this.$route.query
      const data = {}
      // 动态添加参数数据(属性名表达式)
      data[prop] = this.value
      this.doSaveEdit(prop, data)
    },
    // 2.执行修改
    async doSaveEdit (prop, data) {
      try {
        const res = await editUserInfo(data)
        console.log(res)
        // 请求成功
        if (res.data.code === 200) {
          this.$toast.success('修改成功')
          // 如果是头像修改属性值 (不修改value为头像id)
          // console.log(this.value)
          if (prop === 'avatar') {
            this.value = res.data.data.avatar
          }
          // 更新Vuex指定数据
          this.CHANGEONE({
            infoName: prop,
            infoValue: this.value
          })
          // 返回上一页
          this.$router.replace(this.backUrl)
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang='less'>
#edit-info {
  background-color: @white-color;
  .main-container {
    padding: 20px 15px 0;
    text-align: center;
    .van-cell.van-field {
      padding: 7px 10px;
      background-color: @bg-color;
    }
  }
}

</style>
